<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" v-model:data="data"  @onLoad="onload"/>


    <el-dialog v-model="dialogRecharge" title="账户充值" width="450px" @close="form={}">
      <el-form label-width="80px">
        <el-form-item label="账户类型">
          <el-select v-model="form.amountType">
            <el-option v-for="item in form.amounts" :key="item.id" :label="item.name" :value="item.amountType"/>
          </el-select>
        </el-form-item>
        <el-form-item label="充值金额">
          <el-input v-model="form.amount" type="number" placeholder="请输入充值金额"/>
        </el-form-item>
        <el-form-item label="充值说明">
          <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入充值说明"/>
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogRecharge=false">取消</el-button>
          <el-button type="primary" @click="handlerRecharge()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog v-model="dialogEdit" title="修改用户资料" width="450px" @close="form={}">
      <el-form label-width="80px">
        <el-form-item label="手机号">
          <el-input v-model="form.mobile" placeholder="修改手机号"/>
        </el-form-item>
        <el-form-item label="头像">
          <el-input v-model="form.avatar" placeholder="修改头像">
            <template #append>
              <div style="cursor: pointer" @click="$upload(form,'avatar')">上传</div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickname" placeholder="修改昵称"/>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="form.password" type="password" show-password placeholder="修改密码,不输入不修改"/>
        </el-form-item>
        <el-form-item label="支付密码">
          <el-input v-model="form.payPwd" type="password" show-password placeholder="修改支付密码,不输入不修改"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogEdit=false">取消</el-button>
          <el-button type="primary" @click="handlerEdit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
  components: {TablePage},
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '手机号',
          placeholder: '请输入会员手机号查询',
          key: 'mobile'
        },
        {
          type: 'text',
          label: '会员昵称',
          placeholder: '请输入会员昵称查询',
          key: 'nickname'
        },
        {
          type: 'select',
          label: '状态',
          placeholder: '请选择状态查询',
          key: 'status',
          styles: {width: '150px'},
          options: [
            {label: '全部', value: ''},
            {label: '正常', value: '0'},
            {label: '冻结', value: '-1'},
          ]
        }, {
          type: 'date-picker',
          label: '选择时间',
          placeholder: '请选择时间',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          type: 'index',
          width: '80px'
        },
        {
          label: '会员头像',
          type: 'render',
          width: '180px',
          render: (data) => {
            if (!data.avatar) return ''
            return `<img src="${data.avatar}" style="width: 48px;height: 48px"/>`;
          },
        }, {
          label: '会员昵称',
          prop: 'nickname',
          width: '180px'
        }, {
          label: '手机号',
          prop: 'mobile',
          width: '180px'
        }, {
          label: '状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (data.status == 0)
              return `<span class="el-tag el-tag--dark mx-1 is-round"><span class="el-tag__content">正常</span></span>`
            else return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">冻结</span> </span>`
          },
        }, {
          label: '注册时间',
          type: 'date',
          width: '180px',
          prop: 'created',
        }, {
          label: '账户余额',
          type: 'render',
          width: '180px',
          render: (data) => {
            if (!data.amounts) return ''
            let arr = []
            data.amounts.forEach(e => {
              arr.push(`<div style="text-align: left" ><span>${e.name}:</span><span>${e.amount}</span></div>`)
            })

            return arr.join('')
          },
        }, {
          label: '推荐人',
          type: 'render',
          width: '180px',
          render: (data) => {
            if (!data.inviteUser) return ''
            let arr = []

            arr.push(`<p>${data.inviteUser.mobile}</p>`)

            return arr.join('')
          },
        }, {
          label: '操作',
          type: 'buttons',
          width: '220px',
          buttons: [
            {
              label: '编辑',
              type: 'primary',
              styles: {},
              icon: 'Edit',
              callback: (data) => {
                this.form = JSON.parse(JSON.stringify(data));
                this.dialogEdit = true;
              }
            },
            {
              label: '充值',
              type: 'success',
              styles: {},
              icon: 'Position',
              callback: (data) => {
                this.form = data;
                this.dialogRecharge = true;
              }
            },
            {
              label: '删除',
              type: 'danger',
              styles: {},
              icon: 'Delete',
              callback: (data) => {
                this.$api.confirm(`<p>确定要删除[${data.mobile}]会员吗?<br/> 删除后可能会出现未知错误!!!!!</p>`).then(() => {
                })
              },
              hidden: true
            },
            {
              label: '禁用',
              type: 'danger',
              styles: {},
              icon: 'CloseBold',
              hidden: (data) => {
                return data.status != 0
              },
              callback: (data) => {
                this.$api.confirm(`<p>确定要禁用[${data.mobile}]会员吗?<br/> 禁用后会员会立即退出状态</p>`).then(() => {
                  this.$api.get('/api/manage/user/update_status', {id: data.id, status: false})
                      .then(() => {
                        data.status = 1
                      })
                })
              },
            },
            {
              label: '启用',
              type: 'success',
              styles: {},
              icon: 'Check',
              hidden: (data) => {
                return data.status == 0
              },
              callback: (data) => {
                this.$api.confirm(`确定要启用[${data.mobile}]会员吗?\n`).then(() => {
                  this.$api.get('/api/manage/user/update_status', {id: data.id, status: true})
                      .then(() => {
                        data.status = 0
                      })
                })

              }
            }
          ]
        }
      ],
      data: {
        total: 1000,
        list: [],
        page: 1,
        size: 40
      },
      form: {},
      dialogRecharge: false,
      dialogEdit: false

    }
  },

  methods: {
    onload(data) {
      if (data && data.page)
        this.data.page = data.page;
      if (data && data.size)
        this.data.size = data.size;

      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manager/user/', data).then(res => {
        this.data.total = res.total
        this.data.list = res.data;
      })
    },
    handlerRecharge() {
      this.$api.post('/api/platform/finance/amount/change', {}, {
        amountType: this.form.amountType,
        amount: this.form.amount,
        uid: this.form.id,
        remark: this.form.remark,
        type: 'USER'
      }).then(() => {
        this.dialogRecharge = false;
        this.onload(this.data)
      })
    },
    handlerEdit() {
      this.$api.post('/api/manage/user/update', {}, this.form).then(() => {
        this.onload(this.data)
        this.dialogEdit = false;
      })
    }

  }
}
</script>